<template>
  <div class="products-container">
    <!-- 左侧商品类别列表 -->
    <ul class="category-list-wrap">
      <li
        @click="selectCategory(index)"
        v-for="(category, index) in categoryList"
        :key="category.categoryId"
        :class="(currentIndex === index) ? 'bg-active' : ''"
      >
        {{ category.categoryName }}
      </li>
    </ul>

    <!-- 右侧商品列表 -->
    <div class="product-list-wrap" ref="productList">
      <ul>
        <li
          v-for="category in categoryList"
          :key="category.categoryId"
          class="productList-li"
        >
          <p class="category-name">{{ category.categoryName }}</p>
          <ul>
            <!-- 商品信息组件 -->
            <product-info
              v-for="product in category.products"
              :key="product.id"
              :proInfo="product"
            ></product-info>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import ProductInfo from "../common/components/ProductInfo.vue";
import BScroll from '@better-scroll/core';

export default {
  components: {
    ProductInfo,
  },
  computed: {
    categoryList() {
      const { categoryList } = this.$store.state;
      return categoryList;
    },
    // 获取当前列别索引
    currentIndex () {
      const {listScrollTop, heightList} = this;
      return heightList.findIndex((tops, index )=>{
        return listScrollTop >= tops && listScrollTop < heightList[index + 1]
      })
    },
  },
  data() {
    return {
      categoryIndex: null,
      heightList: [], // 存放每个类别的高度
      listScrollTop: 0, // 滚动实时高度
      productListBS: null, // 商品列表的better-scroll实例
    };
  },
  mounted() {
    setTimeout(() => {
      this.setHeightList();
      this.listenScroll();
    }, 0);
  },
  methods: {
    // 监听产品列表滚动事件
    listenScroll() {
      const rightListRef = this.$refs.productList;
      // 初始化better-scroll
      this.productListBS = new BScroll(rightListRef, {
        probeType: 3,
        click: true,
        bounce: false
      });
      this.productListBS.on('scroll', (position) => {
        this.listScrollTop = Math.abs(position.y);
      })
    },
    // 选择左侧菜单
    selectCategory(index) {
      this.categoryIndex = index;
      // 右侧列表滚动到指定商品位置
      this.productListBS.scrollTo(0, -this.heightList[index], 500);
    },
    // 获取每个类别的高度，存放入数组中，在滚动过程中判断当前高度，选中左侧对应的商品类别
    setHeightList() {
      const itemArray = []; //定义一个伪数组
      let top = 0;
      itemArray.push(top);
      const allList =
        this.$refs.productList.getElementsByClassName("productList-li");
      Array.prototype.slice.call(allList).forEach((li) => {
        top += (li.clientHeight); //获取所有li的每一个高度
        itemArray.push(top);
      });
      this.heightList = itemArray;
    },
  },
  beforeDestroy() {
    // 组件销毁时  移除事件
    const rightListRef = this.$refs.productList;
    rightListRef.removeEventListener("scroll", this.scrollCallBack);
  },
};
</script>

<style scoped>
ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.products-container {
  display: flex;
  background-color: #fff;
  height: calc(100vh - 88px);
  overflow-y: auto;
}
.overflow-y-hidden {
  overflow-y: hidden!important;;
}
.overflow-y-atuo {
  overflow-y: auto!important;
}
/* 左侧列表 */
.category-list-wrap {
  width: 156px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.category-list-wrap li {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 120px;
  font-size: 12px;
  color: #999999;
  list-style: none;
  background-color: #f5f5f5;
}
.category-list-wrap .bg-active {
  background-color: #fff;
}
/* 右侧列表 */
.product-list-wrap {
  box-sizing: border-box;
  flex: 1;
  /* min-height: 8px; */
  overflow-y: auto;
}
.category-name {
  margin: 0;
  padding-left: 10px;
  height: 60px;
  display: flex;
  align-items: center;
  color: #999;
}
</style>
